<template>
	<view class="content">
		<!-- F0：留出顶部状态栏的高度 -->
		<view class="f0" :style="{backgroundColor:'#090',height:statusBarHeight+'px'}"></view>
		<!-- F1：自定义导航条 -->
		<view class="f1">
			<uni-icons type="back" color="#fff" size="26" @click="back" />
			<text class="title">待缴费用</text>
			<uni-icons type="list" color="#fff" size="26" @click="goToFeeHistory" />
		</view>

		<!-- F2：费用汇总 -->
		<view class="f2">
			<text>目前待缴费用总额</text>
			<text class="total">￥{{total}}</text>
		</view>

		<!-- F3：各项费用列表 -->
		<!-- thumb：thumbnail，指甲/拇指，缩略图 -->	
		<!-- thumbSize：缩略图大小 -->
		<!-- to：指定列表项可以跳转到哪个页面 -->
		<!-- link：①为列表项增加点击反馈，②右侧添加小箭头，③指定页面跳转方式 -->
		<!-- rightText：在小箭头旁边添加右侧文本 -->
		<uni-list>
			<uni-list-item title="水费" thumb="/static/img/shui.png" thumbSize="lg"  link="navigateTo"  to="/pages/fee-pay/fee-pay?type=1" :rightText="fees.shui<0 ? ('待缴￥'+fees.shui*-1) : ''"/>
			<uni-list-item title="电费" thumb="/static/img/dian.png" thumbSize="lg"  link="navigateTo"  to="/pages/fee-pay/fee-pay?type=2" :rightText="fees.dian<0 ? ('待缴￥'+fees.dian*-1) : ''"/>
			<uni-list-item title="燃气费" thumb="/static/img/ranqi.png" thumbSize="lg"  link="navigateTo"  to="/pages/fee-pay/fee-pay?type=3" :rightText="fees.ranqi<0 ? ('待缴￥'+fees.ranqi*-1) : ''"/>
			<uni-list-item title="物业费" thumb="/static/img/wuye.png" thumbSize="lg"  link="navigateTo"  to="/pages/fee-pay/fee-pay?type=4" :rightText="fees.wuye<0 ? ('待缴￥'+fees.wuye*-1) : ''"/>
			<uni-list-item title="停车费" thumb="/static/img/tingche.png" thumbSize="lg"  link="navigateTo"  to="/pages/fee-pay/fee-pay?type=5" :rightText="fees.tingche<0 ? ('待缴￥'+fees.tingche*-1) : ''"/>
			<uni-list-item title="宽带费" thumb="/static/img/kuandai.png" thumbSize="lg"  link="navigateTo"  to="/pages/fee-pay/fee-pay?type=6" :rightText="fees.kuandai<0 ? ('待缴￥'+fees.kuandai*-1) : ''"/>
		</uni-list>

		<!-- <text>{{fees}}</text> -->
	</view>
</template>

<script>
	import {
		feeList
	} from '@/service'
	export default {
		data() {
			return {
				fees: {}, //各项费用的汇总对象
				statusBarHeight: 0,		//顶部的状态条高度
			}
		},
		//计算属性
		computed: {
			total() { //待缴费用的总金额
				let sum = 0;
				/*
					true && true
					true && false
					false && true
					false && false 
					短路"与"运算:如果表达式1是true,则表达式2要执行;否则不执行
				*/
			    //注意：使用()调整优先级，则前面一行的结尾必须有分号
				(this.fees.shui < 0) && (sum = sum + this.fees.shui);
				(this.fees.dian < 0) && (sum = sum + this.fees.dian);
				(this.fees.ranqi < 0) && (sum = sum + this.fees.ranqi);
				(this.fees.wuye < 0) && (sum = sum + this.fees.wuye);
				(this.fees.tingche < 0) && (sum = sum + this.fees.tingche);
				(this.fees.kuandai < 0) && (sum = sum + this.fees.kuandai);
				return Number(-1 * sum).toFixed(2)
			}
		},
		//生命周期方法 —— 页面挂载完成
		async onLoad() {
			//异步请求当前用户的缴费汇总信息
			let data = await feeList()
			// console.log(data)
			this.fees = data
			//获取当前设备的系统信息（其中的状态栏的高度）
			let info = uni.getSystemInfoSync()
			//console.log(info);
			this.statusBarHeight = info.statusBarHeight //把设备里的状态栏高度保存为模型变量
		},
		methods: {
			//返回上一页
			back() {
				uni.navigateBack()
			},
			//跳转到“缴费记录”页面
			goToFeeHistory() {
				uni.navigateTo({
					url: '/pages/fee-history/fee-history'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.f1 {
		height: $zh-navigation-bar-height;
		background-color: $zh-theme-dark;
		//根据pages.json惯例，导航条文字颜色要么是black要么是white
		color: white;
		padding: 0 $uni-spacing-row-base;
		//弹性容器中的子元素在交叉轴上居中对齐
		align-items: center;

		.title {
			//弹性子元素的宽度增长权重为：1
			flex: 1;
			text-align: center;
			font-weight: bold;
			font-size: $uni-font-size-lg;
			line-height: $zh-navigation-bar-height;
		}
	}

	.f2 {
		background-color: $zh-theme-dark;
		padding: $uni-spacing-col-lg*5 0;
		border-top: 1px solid $uni-border-color;
		//修改弹性容器的主轴方向：纵向
		flex-direction: column;
		//弹性容器中的子元素在交叉轴上居中对齐
		align-items: center;
		color: #fff;

		.total {
			font-size: $uni-font-size-lg*3;
			margin: $uni-spacing-col-lg 0;
		}
	}
</style>
